<template>
    <view class="page-container">
      <view class="container">
        <!-- 顶部导航 -->
        <view class="header">
          <view class="title">AI智能问诊</view>
        </view>
  
        <!-- 聊天区域 -->
        <scroll-view 
          class="chat-container" 
          scroll-y 
          scroll-with-animation
          :scroll-top="scrollTop"
          :enhanced="true"
          :bounces="false"
          :show-scrollbar="false"
        >
          <view class="chat-list">
            <view 
              v-for="(msg, index) in messages" 
              :key="index"
              :class="['message', msg.type]"
            >
              <view class="avatar">
                <uni-icons 
                  :type="msg.type === 'ai' ? 'staff' : 'person'" 
                  size="24" 
                  :color="msg.type === 'ai' ? '#4A90E2' : '#666'" 
                />
              </view>
              <view class="content" v-html="msg.content"></view>
              <view class="time">{{ msg.time }}</view>
            </view>
          </view>
        </scroll-view>
  
        <!-- 底部区域 -->
        <view class="bottom-area">
          <!-- 快捷问诊选项 -->
          <view class="quick-options-wrapper" :class="{ 'quick-options-hidden': !showQuickOptions }">
            <scroll-view class="quick-options" scroll-x>
              <view class="option-list">
                <button 
                  v-for="(option, index) in quickOptions"
                  :key="index"
                  class="quick-option-btn"
                  @click="selectQuickOption(option)"
                >
                  {{ option.text }}
                </button>
              </view>
            </scroll-view>
          </view>
  
          <!-- 底部功能区 -->
          <view class="footer">
            <view class="input-area">
              <input 
                class="text-input"
                v-model="inputMessage"
                placeholder="请输入您的问题"
                @confirm="sendMessage"
                @focus="handleInputFocus"
                :focus="isInputFocused"
                confirm-type="send"
                confirm-hold="true"
              />
              <view 
                class="voice-btn" 
                :class="{ 'recording': isRecording }"
                @touchstart.prevent="startVoiceRecord" 
                @touchend.prevent="endVoiceRecord"
              >
                <uni-icons 
                  type="mic" 
                  size="32" 
                  :color="isRecording ? '#FF4D4F' : '#4A90E2'" 
                />
                <text v-if="isRecording" class="recording-tip">{{ recordingTips }}</text>
              </view>
            </view>
  
            <view class="function-area">
              <button 
                class="one-key-btn" 
                @click="showDoctorPhone"
              >
                <view class="btn-inner">
                  <uni-icons 
                    type="phone" 
                    size="24" 
                    color="#FFFFFF" 
                  />
                  <text>一键问诊</text>
                </view>
              </button>
                <!-- 底部弹出窗口 -->
              <view v-if="showPhoneDialog" class="phone-dialog" @click.stop>
                <view class="phone-content">
                  <view class="phone-header">
                    <text class="phone-title">联系医生</text>
                    <view class="close-btn" @click="closePhoneDialog">
                      <uni-icons type="close" size="20" color="#999999" />
                    </view>
                  </view>
                  
                  <view class="phone-body">
                    <view class="doctor-info">
                      <image class="doctor-avatar" src="/static/doctor-avatar.jpg" mode="aspectFill" />
                      <view class="doctor-detail">
                        <text class="doctor-name">张医生</text>
                        <text class="doctor-title">主任医师</text>
                      </view>
                    </view>
                    
                    <view class="phone-number">
                      <text class="number-label">联系电话</text>
                      <text class="number-value">15398301164</text>
                    </view>
                    
                    <view class="action-buttons">
                      <button class="action-btn call-btn" @click="callDoctor">
                        <uni-icons type="phone" size="20" color="#FFFFFF" />
                        <text>立即拨打</text>
                      </button>
                      
                      <button class="action-btn copy-btn" @click="copyNumber">
                        <uni-icons type="copy" size="20" color="#4A90E2" />
                        <text>复制号码</text>
                      </button>
                      
                      <button class="action-btn contact-btn" @click="addToContacts">
                        <uni-icons type="personadd" size="20" color="#4A90E2" />
                        <text>保存到通讯录</text>
                      </button>
                    </view>
                  </view>
                </view>
              </view>

              <button 
                class="help-btn" 
                @click="showHelp"
              >
                <uni-icons 
                  type="help" 
                  size="16" 
                  color="#4A90E2" 
                />
                <text>帮助</text>
              </button>
            </view>
          </view>
        </view>
  
        <!-- 帮助弹窗 -->
        <view class="help-dialog" v-if="showHelpDialog" @click.stop>
          <view class="help-content">
            <view class="help-header">
              <text class="help-title">{{ helpContent.title }}</text>
            </view>
            <scroll-view class="help-body" scroll-y>
              <view 
                v-for="(section, index) in helpContent.sections" 
                :key="index"
                class="help-section"
              >
                <text class="section-title">{{ section.title }}</text>
                <text class="section-content">{{ section.content }}</text>
              </view>
            </scroll-view>
            <view class="help-footer">
              <button class="confirm-btn" @click="closeHelp">我知道了</button>
            </view>
          </view>
        </view>
      </view>
    </view>
  </template>
  
  <script lang="ts" setup>
  import { ref, watch, nextTick, onMounted } from 'vue';
  import { apiBaseUrl } from '../../config/api';

  // 定义 Uni 接口
  interface Uni {
    request: (options: {
      url: string;
      method?: string;
      header?: any;
      data?: any;
      success?: (res: { statusCode: number; data: any }) => void;
      fail?: (error: any) => void;
    }) => Promise<{ statusCode: number; data: any }>;
    showToast: (options: { title: string; icon?: string; duration?: number }) => void;
    showModal: (options: { 
      title: string; 
      content: string; 
      confirmText?: string; 
      success?: (res: { confirm: boolean; cancel: boolean }) => void 
    }) => void;
    getSystemInfo: (options: { success: (res: any) => void; fail: (error: any) => void }) => void;
    getRecorderManager: () => RecorderManager;
    createInnerAudioContext: () => InnerAudioContext;
    uploadFile: (options: {
      url: string;
      filePath: string;
      name: string;
      formData?: any;
      success?: (res: any) => void;
      fail?: (error: any) => void;
    }) => void;
    authorize: (options: { 
      scope: string; 
      success?: () => void; 
      fail?: () => void 
    }) => void;
    openSetting: (options: { 
      success?: (res: { authSetting: any }) => void;
      fail?: (error: any) => void;
    }) => void;
    makePhoneCall: (options: {
      phoneNumber: string;
      success?: () => void;
      fail?: (error: any) => void;
    }) => void;
    setClipboardData: (options: {
      data: string;
      success?: () => void;
      fail?: () => void;
    }) => void;
    addPhoneContact: (options: {
      firstName: string;
      lastName?: string;
      mobilePhoneNumber: string;
      organization?: string;
      title?: string;
      success?: () => void;
      fail?: (error: any) => void;
    }) => void;
    getStorageSync: (key: string) => any;
  }

  // 定义录音管理器接口
  interface RecorderManager {
    onStart: (callback: () => void) => void;
    onStop: (callback: (res: { tempFilePath: string; duration: number }) => void) => void;
    onError: (callback: (res: any) => void) => void;
    start: (options: {
      duration?: number;
      sampleRate?: number;
      numberOfChannels?: number;
      encodeBitRate?: number;
      format?: string;
      frameSize?: number;
    }) => void;
    stop: () => void;
  }

  // 定义音频上下文接口
  interface InnerAudioContext {
    src: string;
    play: () => void;
    stop: () => void;
    onEnded: (callback: () => void) => void;
    onError: (callback: (res: any) => void) => void;
  }

  // 声明全局 uni 对象
  declare const uni: Uni;

  // 删除智谱AI配置和类型定义
  interface Message {
    type: string;
    content: string;
    time: string;
  }

  // 后端响应类型定义
  interface AIResponse {
    content: string;
  }

  // 在文件顶部添加类型声明
  declare const requirePlugin: (name: string) => any;
  declare const wx: any;

  // 状态定义
  const inputMessage = ref('');
  const showQuickOptions = ref(true);
  const scrollTop = ref(0);
  const showHelpDialog = ref(false);
  const isRecording = ref(false);
  const showPhoneDialog = ref(false);
  const isLoading = ref(false);
  const recordingTips = ref('按住说话');
  const hasRecordPermission = ref(false);
  const isInputFocused = ref(false);
  const isAIThinking = ref(false);

  const recorderManager = uni.getRecorderManager();
  const innerAudioContext = uni.createInnerAudioContext();
  let tempFilePath = '';

  const showDoctorPhone = () => {
    showPhoneDialog.value = true;
  };

  const closePhoneDialog = () => {
    showPhoneDialog.value = false;
  };

  const callDoctor = () => {
    // 使用uni.makePhoneCall实现拨号功能
    uni.makePhoneCall({
      phoneNumber: '15398301164', // 这里填写实际的医生电话号码
      success: () => {
        console.log('拨打电话成功');
        closePhoneDialog();
      },
      fail: (err) => {
        console.error('拨打电话失败:', err);
        uni.showToast({
          title: '拨打电话失败',
          icon: 'none'
        });
      }
    });
  };

  const copyNumber = () => {
    // 使用uni.setClipboardData实现复制功能
    uni.setClipboardData({
      data: '15398301164', // 这里填写实际的医生电话号码
      success: () => {
        uni.showToast({
          title: '复制成功',
          icon: 'success'
        });
        closePhoneDialog();
      },
      fail: () => {
        uni.showToast({
          title: '复制失败',
          icon: 'none'
        });
      }
    });
  };

  const addToContacts = () => {
    // 使用uni.addPhoneContact实现添加到通讯录功能
    uni.addPhoneContact({
      firstName: '张医生',
      lastName: '',
      mobilePhoneNumber: '15398301164', // 这里填写实际的医生电话号码
      organization: '医院',
      title: '主任医师',
      success: () => {
        uni.showToast({
          title: '添加成功',
          icon: 'success'
        });
        closePhoneDialog();
      },
      fail: (err) => {
        console.error('添加到通讯录失败:', err);
        uni.showToast({
          title: '添加失败',
          icon: 'none'
        });
      }
    });
  };
  
  // 消息列表
  const messages = ref<Message[]>([
    {
      type: 'ai',
      content: '您好！我是AI智能医生助手，请问有什么可以帮您？',
      time: '09:00'
    }
  ]);
  
  // 检查录音权限
  const checkRecordPermission = () => {
    return new Promise((resolve, reject) => {
      uni.authorize({
        scope: 'scope.record',
        success: () => {
          hasRecordPermission.value = true;
          resolve(true);
        },
        fail: () => {
          hasRecordPermission.value = false;
          uni.showModal({
            title: '提示',
            content: '需要您授权使用麦克风',
            confirmText: '去设置',
            success: (res) => {
              if (res.confirm) {
                // 打开设置页面
                uni.openSetting({
                  success: (settingRes) => {
                    if (settingRes.authSetting['scope.record']) {
                      hasRecordPermission.value = true;
                      resolve(true);
                    } else {
                      resolve(false);
                    }
                  },
                  fail: () => {
                    resolve(false);
                  }
                });
              } else {
                resolve(false);
              }
            }
          });
        }
      });
    });
  };

  // 开始录音
  const startVoiceRecord = async () => {
    if (isRecording.value) {
      console.log('已经在录音中');
      return;
    }

    // 检查权限
    if (!hasRecordPermission.value) {
      await checkRecordPermission();
      // 获取权限后不自动开始录音，需要用户再次点击
      return;
    }

    try {
      recorderManager.start({
        duration: 60000,
        sampleRate: 16000,
        numberOfChannels: 1,
        encodeBitRate: 48000,
        format: 'wav',
        frameSize: 1
      });
    } catch (error) {
      console.error('开始录音失败:', error);
      isRecording.value = false;
      uni.showToast({
        title: '开始录音失败',
        icon: 'none'
      });
    }
  };
  
  // 结束录音
  const endVoiceRecord = () => {
    if (!isRecording.value) {
      console.log('当前没有在录音');
      return;
    }
    
    try {
      recorderManager.stop();
    } catch (error) {
      console.error('结束录音失败:', error);
      isRecording.value = false;
      recordingTips.value = '按住说话';
      uni.showToast({
        title: '结束录音失败',
        icon: 'none'
      });
    }
  };
  
  // 初始化录音管理器
  const initRecorder = () => {
    return new Promise<void>((resolve, reject) => {
      try {
        // 配置录音参数
        recorderManager.onStart(() => {
          console.log('录音开始');
          isRecording.value = true;
          recordingTips.value = '松开结束';
        });

        recorderManager.onStop((res) => {
          console.log('录音结束', res);
          isRecording.value = false;
          recordingTips.value = '按住说话';
          tempFilePath = res.tempFilePath;
          
          // 检查录音时长
          if (res.duration < 1000) {
            uni.showToast({
              title: '录音时间太短',
              icon: 'none'
            });
            return;
          }
          
          // 将录音文件转换为文字
          uni.uploadFile({
            url: `${apiBaseUrl}/ai/speech/recognize`,
            filePath: tempFilePath,
            name: 'audio',
            formData: {
              format: 'wav',
              rate: 16000,
              channel: 1,
              token: uni.getStorageSync('token') || ''
            },
            success: (uploadRes) => {
              try {
                const result = JSON.parse(uploadRes.data);
                console.log('语音识别结果:', result);
                
                if (result.code === 200) {
                  if (result.text) {
                    inputMessage.value = result.text;
                    // 延迟聚焦输入框，确保文字已经填入
                    setTimeout(() => {
                      isInputFocused.value = true;
                    }, 100);
                  } else {
                    uni.showToast({
                      title: '未能识别到语音内容',
                      icon: 'none'
                    });
                  }
                } else {
                  console.error('语音识别失败:', result);
                  let errorMsg = '语音识别失败';
                  if (result.msg) {
                    errorMsg = result.msg;
                  } else if (result.err_msg) {
                    errorMsg = `语音识别失败: ${result.err_msg}`;
                  }
                  uni.showToast({
                    title: errorMsg,
                    icon: 'none',
                    duration: 2000
                  });
                }
              } catch (e) {
                console.error('解析结果失败:', e);
                uni.showToast({
                  title: '语音识别失败',
                  icon: 'none'
                });
              }
            },
            fail: (err) => {
              console.error('上传失败:', err);
              uni.showToast({
                title: '语音识别失败',
                icon: 'none'
              });
            }
          });
        });

        recorderManager.onError((res) => {
          console.error('录音错误:', res);
          isRecording.value = false;
          recordingTips.value = '按住说话';
          uni.showToast({
            title: '录音失败，请重试',
            icon: 'none'
          });
        });

        resolve();
      } catch (error) {
        console.error('初始化录音管理器失败:', error);
        reject(error);
      }
    });
  };
  
  // 滚动到底部方法
  const scrollToBottom = () => {
    nextTick(() => {
      setTimeout(() => {
        scrollTop.value = Math.random() * 10000; // 使用随机值强制触发滚动更新
      }, 100);
    });
  };
  
  // 监听消息列表变化
  watch(messages, () => {
    scrollToBottom();
  }, { deep: true });
  
  // 快捷选项
  const quickOptions = ref([
    { text: '头痛', type: 'default' },
    { text: '发烧', type: 'default' },
    { text: '咳嗽', type: 'default' },
    { text: '腹痛', type: 'default' },
    { text: '失眠', type: 'default' }
  ]);
  
  // 帮助文档内容
  const helpContent = {
    title: 'AI智能问诊助手使用指南',
    sections: [
      {
        title: '功能介绍',
        content: '本AI智能问诊助手是一个基于人工智能的医疗咨询工具，可以为您提供24小时的初步医疗咨询服务。它能够理解您的症状描述，提供初步分析和建议。'
      },
      {
        title: '使用方法',
        content: [
          '1. 快捷问诊：点击上方快捷选项，快速开始常见症状咨询',
          '2. 文字输入：在输入框输入您的症状描述',
          '3. 语音输入：按住麦克风图标说话，松开后自动识别',
          '4. 一键问诊：点击"一键问诊"按钮，快速开始全面诊断'
        ].join('\n')
      },
      {
        title: '注意事项',
        content: [
          '• AI建议仅供参考，重要医疗决策请咨询专业医生',
          '• 描述症状时请尽可能详细准确',
          '• 如遇紧急情况请立即就医',
          '• 您的咨询记录将严格保密'
        ].join('\n')
      }
    ]
  };
  
  
  const handleInputFocus = () => {
    showQuickOptions.value = true;
  };
  
  // 监听输入框内容变化
  watch(inputMessage, (newVal) => {
    isInputFocused.value = newVal.trim().length > 0;
  });
  
  // 修改调用AI的方法
  const callZhipuAI = async (userMessage: string): Promise<string> => {
    try {
      isLoading.value = true;
      const response = await uni.request({
        url: `${apiBaseUrl}/ai/chat`, // 替换为您的实际后端接口地址
        method: 'POST',
        header: {
          'Content-Type': 'application/json'
        },
        data: {
          message: userMessage
        }
      });

      if (response.statusCode === 200 && response.data) {
        return (response.data as AIResponse).content;
      } else {
        throw new Error('AI响应失败');
      }
    } catch (error) {
      console.error('调用AI服务失败:', error);
      uni.showToast({
        title: 'AI服务暂时不可用',
        icon: 'none'
      });
      return '抱歉，我现在无法为您提供准确的建议，请稍后再试或直接咨询医生。';
    } finally {
      isLoading.value = false;
    }
  };
  
  // 格式化消息内容，将**内容**转换为加粗
  const formatMessage = (content: string) => {
    return content.replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>');
  };
  
  // 修改发送消息的方法
  const sendMessage = async () => {
    if (!inputMessage.value.trim() || isLoading.value) return;
    
    const userMessage = inputMessage.value;
    messages.value.push({
      type: 'user',
      content: userMessage,
      time: new Date().toLocaleTimeString('zh-CN', { hour12: false }).slice(0, 5)
    });
    
    inputMessage.value = '';
    isInputFocused.value = false;
    showQuickOptions.value = false;
    scrollToBottom();
    
    // 添加AI思考中的消息
    isAIThinking.value = true;
    messages.value.push({
      type: 'ai',
      content: '思考中...',
      time: new Date().toLocaleTimeString('zh-CN', { hour12: false }).slice(0, 5)
    });
    scrollToBottom();
    
    // 调用AI获取回复
    const aiResponse = await callZhipuAI(userMessage);
    
    // 移除思考中的消息，添加实际回复
    messages.value.pop();
    messages.value.push({
      type: 'ai',
      content: formatMessage(aiResponse),
      time: new Date().toLocaleTimeString('zh-CN', { hour12: false }).slice(0, 5)
    });
    
    isAIThinking.value = false;
    scrollToBottom();
  };
  
  const selectQuickOption = (option: { text: string }) => {
    inputMessage.value = option.text;
    sendMessage();
  };
  
  
  const showHelp = () => {
    showHelpDialog.value = true;
  };
  
  const closeHelp = () => {
    showHelpDialog.value = false;
  };

  // 在组件加载时初始化录音管理器
  onMounted(() => {
    const initPlugin = async () => {
      try {
        // 等待页面完全加载
        await new Promise(resolve => setTimeout(resolve, 1000));
        
        // 检查小程序环境
        await new Promise((resolve, reject) => {
          uni.getSystemInfo({
            success: (res) => {
              console.log('系统信息:', res);
              resolve(res);
            },
            fail: (error) => {
              console.error('获取系统信息失败:', error);
              reject(error);
            }
          });
        });

        // 初始化录音管理器
        await initRecorder();
        
        // 检查录音权限
        await checkRecordPermission();
      } catch (error) {
        console.error('初始化失败:', error);
      }
    };

    initPlugin();
  });
  </script>
  
  <style lang="scss" scoped>
  @import './consult.scss';
  .voice-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 20px;
    background-color: #F5F5F5;
    transition: all 0.3s;
  }

  .voice-btn.recording {
    background-color: #FFE8E8;
    animation: pulse 1.5s infinite;
  }

  .voice-btn.send-btn {
    background-color: #4A90E2;
  }

  .voice-btn.send-btn .uni-icons {
    color: #FFFFFF !important;
  }

  @keyframes pulse {
    0% {
      transform: scale(1);
    }
    50% {
      transform: scale(1.1);
    }
    100% {
      transform: scale(1);
    }
  }

  .recording-tip {
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background-color: rgba(0, 0, 0, 0.7);
    color: #fff;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
  }

  .message {
    display: flex;
    margin-bottom: 16px;
    width: 100%;
    
    .avatar {
      flex-shrink: 0;
      width: 40px;
      height: 40px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: #f5f5f5;
      border-radius: 20px;
    }
    
    .content {
      margin: 0 8px;
      padding: 12px 16px;
      border-radius: 8px;
      background-color: #F5F5F5;
      word-break: break-word;
      line-height: 1.5;
      font-size: 15px;
      
      strong {
        font-weight: bold;
        color: #333;
      }
    }

    .time {
      font-size: 12px;
      color: #999;
      margin-top: 4px;
      position: absolute;
      right: 16px;
      top: -20px;
    }
    
    &.ai {
      padding-left: 12px;
      padding-right: 24px;
      
      .content {
        flex: 1;
        min-width: 85%;
        background-color: #E8F0FE;
      }
    }

    &.user {
      flex-direction: row-reverse;
      padding-right: 12px;
      padding-left: 24px;
      
      .content {
        max-width: fit-content;
        background-color: #007AFF;
        color: #FFFFFF;
      }
      
      .time {
        right: auto;
        left: 16px;
      }
    }
  }

  .chat-list {
    width: 100%;
    padding: 20px 0;
    
    .message {
      position: relative;
      margin-bottom: 30px;
      display: flex;
      width: 100%;
      
      .avatar {
        flex-shrink: 0;
        width: 40px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #f5f5f5;
        border-radius: 20px;
      }
      
      .content {
        padding: 12px 16px;
        border-radius: 8px;
        background-color: #F5F5F5;
        word-break: break-word;
        line-height: 1.5;
        font-size: 15px;
        margin: 0 8px;
        
        strong {
          font-weight: bold;
          color: #333;
        }
      }

      .time {
        font-size: 12px;
        color: #999;
        margin-top: 4px;
        position: absolute;
        right: 12px;
        top: -20px;
      }
      
      &.ai {
        margin-left: 0;
        padding-right: 12px;
        
        .content {
          flex: 1;
          min-width: 85%;
          background-color: #E8F0FE;
        }
      }

      &.user {
        flex-direction: row-reverse;
        margin-right: 0;
        padding-left: 12px;
        
        .content {
          max-width: fit-content;
          background-color: #007AFF;
          color: #FFFFFF;
        }
        
        .time {
          right: auto;
          left: 12px;
        }
      }
    }
  }

  .help-dialog {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;

    .help-content {
      background-color: #FFFFFF;
      width: 85%;
      max-width: 400px;
      border-radius: 12px;
      padding: 20px;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
      display: flex;
      flex-direction: column;
      max-height: 80%;
    }

    .help-header {
      padding-bottom: 15px;
      border-bottom: 1px solid #E5E5E5;
      text-align: center;
      .help-title {
        font-size: 18px;
        font-weight: bold;
        color: #333;
      }
    }

    .help-body {
      flex: 1;
      overflow-y: auto;
      padding: 15px 0;
      margin-top: 10px;
      margin-bottom: 10px;
    }

    .help-section {
      margin-bottom: 15px;
      .section-title {
        font-size: 16px;
        font-weight: bold;
        color: #4A90E2;
        margin-bottom: 8px;
        display: block;
      }
      .section-content {
        font-size: 14px;
        color: #666;
        line-height: 1.6;
        white-space: pre-wrap; 
        word-wrap: break-word; 
      }
    }

    .help-footer {
      padding-top: 15px;
      border-top: 1px solid #E5E5E5;
      text-align: center;
      .confirm-btn {
        background-color: #4A90E2;
        color: #FFFFFF;
        border-radius: 20px;
        padding: 10px 20px;
        font-size: 16px;
        border: none;
        width: 100%;
      }
    }
  }

  .page-container {
    height: 100vh;
    display: flex;
    flex-direction: column;
    background-color: #FFFFFF;
  }

  .container {
    flex: 1;
    display: flex;
    flex-direction: column;
    width: 100%;
    overflow: hidden;
  }

  .chat-container {
    flex: 1;
    width: 100%;
    overflow-y: auto;
  }

  .chat-list {
    width: 100%;
    
    .message {
      display: flex;
      width: 100%;
      margin-bottom: 24px;
      position: relative;
      
      .avatar {
        flex-shrink: 0;
        width: 40px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #f5f5f5;
        border-radius: 20px;
      }
      
      .content {
        padding: 12px 16px;
        border-radius: 8px;
        background-color: #F5F5F5;
        word-break: break-word;
        line-height: 1.5;
        font-size: 15px;
        margin: 0 8px;
        
        strong {
          font-weight: bold;
          color: #333;
        }
      }

      .time {
        font-size: 12px;
        color: #999;
        position: absolute;
        top: -20px;
      }
      
      &.ai {
        padding: 0;
        margin: 0;
        padding-right: 12px;
        
        .avatar {
          margin-left: 0;
        }
        
        .content {
          flex: 1;
          min-width: 85%;
          background-color: #E8F0FE;
        }

        .time {
          right: 12px;
        }
      }

      &.user {
        flex-direction: row-reverse;
        padding: 0;
        margin: 0;
        padding-left: 12px;
        
        .avatar {
          margin-right: 0;
        }
        
        .content {
          max-width: fit-content;
          background-color: #007AFF;
          color: #FFFFFF;
        }
        
        .time {
          left: 12px;
        }
      }
    }
  }

  .bottom-area {
    width: 100%;
    background-color: #FFFFFF;
    padding: 6px 16px 16px 16px;
    padding-right: 28px;

    .quick-options-wrapper {
      margin-bottom: 6px;
      
      .quick-options {
        width: 100%;
        overflow-x: auto;
        
        &::-webkit-scrollbar {
          display: none;
        }
        
        .option-list {
          display: flex;
          gap: 8px;
          padding: 2px 0;
          
          .quick-option-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            padding: 4px 16px;
            background-color: #F7F8FC;
            border: none;
            border-radius: 20px;
            font-size: 14px;
            color: #333;
            white-space: nowrap;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
            
            &:active {
              background-color: #E8F0FE;
              color: #4A90E2;
            }
          }
        }
      }
    }

    .input-area {
      display: flex;
      align-items: center;
      margin-bottom: 12px;

      .text-input {
        flex: 1;
        height: 40px;
        padding: 0 16px;
        border: none;
        background: #F7F8FC;
        border-radius: 20px;
        font-size: 15px;
        margin-right: 16px;
        
        &:focus {
          outline: none;
        }
      }

      .voice-btn {
        width: 40px;
        height: 40px;
        border-radius: 20px;
        background: #F7F8FC;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: 12px;
      }
    }

    .function-area {
      display: flex;
      align-items: center;
      gap: 12px;
      
      .one-key-btn {
        flex: 1;
        height: 44px;
        background-color: #4A90E2;
        border: none;
        border-radius: 22px;
        padding: 0;
        color: #FFFFFF;
        font-size: 16px;
        display: flex;
        align-items: center;
        justify-content: center;
        
        .btn-inner {
          display: flex;
          align-items: center;
          justify-content: center;
          gap: 4px;
        }
      }

      .help-btn {
        height: 44px;
        padding: 0 20px;
        background: #F7F8FC;
        border: none;
        border-radius: 22px;
        color: #666;
        font-size: 14px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 4px;
      }
    }
  }
  </style>